<template>
  <div class="contentDate">
    <i
      class="iconfont"
      @click="openDatePicker" >&#xe65b;
    </i>
    <a>{{ selectedDate }}</a>
    <div
      v-if="showDate"
      class="date">
      <div class="date-title"><span>日历</span><i @click="cancel">X</i></div>
      <label>
        日期:
        <input
          v-model="date"
          class="time"
          placeholder="" >
      </label>
      <date-picker
        v-if="showDatePicker"
        :range="range"
        :lunar="lunar"
        :zero="true"
        @select="select"/>
    </div>
  </div>
</template>
<script>
import DatePicker from './datePicker.vue'
export default {
  components: {
    DatePicker
  },
  props: {
    range: {
      type: Boolean,
      default: false
    },
    lunar: {
      type: Boolean,
      default: false
    },
    selectedDate: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      showDatePicker: true,
      showDate: false,
      date: ''
    }
  },
  methods: {
    openDatePicker () {
      this.showDate = true
      this.showDatePicker = true
    },
    select (date) {
      this.date = date
      this.showDate = false
      this.$emit('confirmDate', this.date)
    },
    confirm () {
      this.showDate = false
      this.$emit('confirmDate', this.date)
    },
    cancel () {
      this.showDate = false
    },
    formatDate () {
      let now = new Date()
      let year = now.getFullYear()
      let mon = now.getMonth() + 1
      let day = now.getDate()
      if (mon < 10) {
        mon = '0' + mon
      }
      if (day < 10) {
        day = '0' + day
      }
      return year + '-' + mon + '-' + day
    }
  }
}
</script>
<style lang="scss">
$f_color : #ffffff;
$bg_color_s : #0E0A2E;
$border-c:#79C4EE;
$bg_color: #251F5B;
$f_size:.26rem;
.contentDate {
  .date {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    width: 100%;
    height: 100%;
    background: $bg_color;
    label {
      display: block;
      height: 1rem;
      line-height: 1rem;
      font-size: 0.26rem;
      float: left;
      width: 45%;
      margin-left: .25rem;
      color: #65C4EA;
      .time {
        border: none;
        border-bottom: 0.02rem solid $f_color;
        background:$bg_color;
        color: $f_color;
        font-size: $f_size;
        width: 2.5rem;
        padding-left:.1rem;
      }
    }
    .date-title{
      width: 100%;
      height: .5rem;
      line-height: .5rem;
      position: relative;
      left: 0;
      top: 0;
      text-align: center;
      font-size: $f_size;
      span {
        display: inline-block;
        height: .5rem;
        line-height: .5rem;
        text-align: center;
        font-size: $f_size;
      }
      i {
          position: absolute;
          right:.05rem;
          top:0;
          margin-right: .06rem;
          font-size: $f_size;
          color: $f_color;
        }
    }
    button {
      width: 49.5%;
      height: 0.6rem;
      line-height: 0.6rem;
      text-align: center;
      color: $f_color;
      font-size: $f_size;
      display: inline-block;
      background: #2F3C86;
      border: #79C4EE;
      border-radius: 0.05rem;
      border: none;
      flex: 1;
      margin-top: .1rem;
      margin-bottom: .2rem;
    }
  }
  i {
    width: 0.4rem;
    height: 0.4rem;
    float: left;
    font-size: 0.4rem;
    color: #69A8E6;
  }
  a{
    height: 0.4rem;
    float: right;
    font-size: 0.26rem;
    color: #ffffff;
    margin-right: .2rem;
  }
}
</style>
